<script setup lang="ts">
import { NTooltip, NIcon } from 'naive-ui'
import { AlertCircle } from '@vicons/tabler'
import { HelpCircleOutline } from '@vicons/ionicons5'
import { computed, ref, onMounted, onUnmounted } from 'vue'

// 添加一个自定义 hook 来检测系统颜色方案
const useSystemColorScheme = () => {
  const isDarkMode = ref(false)

  const updateColorScheme = (e: MediaQueryListEvent | MediaQueryList) => {
    isDarkMode.value = e.matches
  }

  onMounted(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    isDarkMode.value = mediaQuery.matches
    mediaQuery.addEventListener('change', updateColorScheme)
  })

  onUnmounted(() => {
    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', updateColorScheme)
  })

  return isDarkMode
}

interface Props {
  content: string
  type?: 'info' | 'question'
  placement?: 'top' | 'bottom' | 'left' | 'right'
  defaultColor?: string
  hoverColor?: string
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  type: 'info',
  placement: 'top',
  defaultColor: 'text-gray-500',
  hoverColor: 'hover:text-blue-500',
  size: 15
})

const isDarkMode = useSystemColorScheme()

const tooltipClass = computed(() => [
  'rounded-lg',
  isDarkMode.value ? 'bg-gray-800 text-white' : 'bg-white text-black'
])

const icon = computed(() => (props.type === 'info' ? AlertCircle : HelpCircleOutline))

const iconClass = computed(() => [
  props.defaultColor,
  props.hoverColor,
  'cursor-pointer flex items-center justify-center',
  isDarkMode.value ? 'text-gray-300 hover:text-blue-300' : ''
])
</script>

<template>
  <NTooltip trigger="hover" size="small" :show-arrow="false" raw :duration="10" :placement="placement" :class="tooltipClass">
    <template #trigger>
      <div :class="iconClass">
        <NIcon :size="size">
          <component :is="icon" />
        </NIcon>
      </div>
    </template>
    <span class="text-12px items-end flex p-2 rounded-lg">{{ content }}</span>
  </NTooltip>
</template>
